<template>
  <div>
    <el-card>
      <el-row class="head" type="flex" justify="space-between" align="middle">
        <el-button type="primary" class="elButton" @click="dialogVisible = true">添加经纪</el-button>
        <div style="margin-top: 15px;" class="right">
          <el-input v-model="query.name_contains" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search" @click="btnSearch" />-->
          </el-input>
        </div>
      </el-row>
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="180">
          <template slot-scope="{row}">
            <img :src="row.image" alt style="width:180px;height:120px">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="phone" label="电话" width="180" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="primary" @click="editPermission(row.id)">编辑</el-button>
            <el-button type="danger" @click="deleteEmployee(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="hr" />
      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.size"
          :current-page="page.page" 
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <el-dialog
      :title="this.tableData.id ? '编辑' : '新增'"
      width="30%"
      :visible.sync="dialogVisible"
      @close="btnCancel"
    >
      <el-form ref="perTableData" :model="tableData" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="tableData.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="tableData.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="tableData.phone" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="tableData.address" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="tableData.desc" />
        </el-form-item>
        <el-form-item label="封面">
          <imageUpload ref="houseimage" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAgents,
  delAgents,
  postAgents,
  getAgentstable,
  editAgents,
  pgAgents
} from '@/api/broker'
import imageUpload from '@/components/ImageUpload'
export default {
  components: {
    imageUpload
  },
  data() {
    return {
      dialogVisible: false,
      // 上传图片
      dialogImageUrl: '',
      tableData: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: ''
      },
      page: {
        page: 1, // 当前页码
        size: 2,
        total: 20 // 总数
      },
      // 分页参数
      query: {
        // 每页获取条数
        _limit: 2,
        // 第0条开始获取数据
        _start: 0,
        // 带值的参数
        name_contains: ''
      },
      list: [],
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        email: [
          { required: true, message: '请填写正确的邮箱', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '描述不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.pgAgents()
  },
  methods: {
    async pgAgents() {
      this.query._limit = 999
      const start = this.query._start
      this.query._start = 0
      const data = await pgAgents(this.query)
      // 总数的长度
      this.page.total = data.data.length
      // 获取总数
      this.query._limit = this.page.size
      this.query._start = start
      const res = await pgAgents(this.query)
      this.list = res.data
    },
    async changePage(newPage) {
      // 当前分页点击的页数
      this.page.page = newPage
      // 从第几条获取数据
      this.query._start = (this.page.page - 1) * this.query._limit
      // 获取结果
      const result = await pgAgents(this.query)
      // 绑定数据重新渲染页面
      this.list = result.data
    },
    async btnSearch() {
      this.query._start = 0
      this.query._limit = this.page.size
      this.page.page = 1
      let res = 0
      // 判断是否有title_contains参数
      if (this.query.name_contains) {
        // 有参查询
        this.query._limit = 999
        res = await pgAgents(this.query)
        this.page.total = res.data.length
        this.query._limit = this.page.size
        res = await pgAgents(this.query)
      } else {
        // 默认查询全部
        // 获取新的总数
        const result = await getAgents()
        this.page.total = result.data.length
        res = await pgAgents(this.query)
      }
      this.list = res.data
    },
    async getAgents() {
      const res = await getAgents()
      this.page.total = res.data.length
      this.list = res.data
    },
    btnOK() {
      this.$refs.perTableData
        .validate()
        .then(() => {
          const fileList = this.$refs.houseimage.fileList
          if (this.tableData.id) {
            return editAgents(
              this.tableData,
              (this.tableData.image = fileList[0].url)
            )
          }
          return postAgents(
            this.tableData,
            (this.tableData.image = fileList[0].url)
          )
        })
        .then(() => {
          if (!this.tableData.id) {
            this.$message.success('新增成功')
            this.pgAgents()
            this.dialogVisible = false
          } else {
            this.$message.success('修改成功')
            this.pgAgents()
            this.dialogVisible = false
          }
        })
    },
    // 编辑
    async editPermission(id) {
      this.dialogVisible = true
      const res = await getAgentstable(id)
      this.tableData = res.data
      if (res.data.image) {
        this.$refs.houseimage.fileList = [
          { url: res.data.image, upload: true }
        ]
      }
    },
    // 删除
    async deleteEmployee(id) {
      try {
        await this.$confirm('确定要删除该数据吗？')
        await delAgents(id)
        // 判断当前数据是否删除完
        if (this.page.total % this.query._limit) {
          // 删除完当前页数据自动跳转到上一页
          this.query._start = this.query._start - this.query._limit
          this.page.page--
        }
        this.pgAgents()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    btnCancel() {
      this.tableData = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: ''
      }
      this.$refs.perTableData.resetFields()
      this.$refs.houseimage.fileList = []
      this.dialogVisible = false
    }
  }
}
</script>

<style>
.hr {
  margin-top: 25px;
  margin-bottom: 10px;
  height: 1px;
  background-color: #ccc;
}
.head {
  margin-bottom: 25px;
  border-bottom: 1px solid #ccc;
}
.right {
  line-height: 90px;
}
.el-card {
  margin: 20px;
}
.el-input-group {
  width: 600px;
}
</style>
